<template>
  <div class="container">
    <div>
      <logo />
      <h1 class="title">谁家的小猪,</h1>
      <h2 class="subtitle">
        云开发 CloudBase + Nuxt SSR 全栈应用，包含前端网站 + 云开发函数
      </h2>
      <div class="links">
        <a href="https://cloudbase.net/" target="_blank" class="button--green"
          >云开发 CloudBase 文档</a
        >
        <a href="https://nuxtjs.org/" target="_blank" class="button--green"
          >Nuxt 文档</a
        >
        <a
          href="https://github.com/nuxt/nuxt.js"
          target="_blank"
          class="button--grey"
          >GitHub</a
        >
      </div>

      <h2>本示例 Github 源码地址：</h2>
      <a
        href="https://github.com/TencentCloudBase/cloudbase-templates/tree/master/nuxt-ssr"
        >https://github.com/TencentCloudBase/cloudbase-templates/tree/master/nuxt-ssr</a
      >
      <h2>
        开发部署工具: CloudBase Framework
        <a href="https://github.com/TencentCloudBase/cloudbase-framework">
          <img
            alt="CloudBase Framework"
            src="https://img.shields.io/github/stars/TencentCloudBase/cloudbase-framework?style=social"
          />
        </a>
      </h2>
      <a
        href="https://github.com/TencentCloudBase/cloudbase-framework"
        title="CloudBase Framework: 云开发前后端一体化部署工具"
      >
        <img
          width="420"
          src="https://main.qcloudimg.com/raw/615038b16047fa677646011fae909102.png"
        />
      </a>
    </div>
    <div class="text-center"       data-aos="fade-up"
      data-aos-duration="2000">
      <div class="w-25 p-3 mb-1 bg-secondary text-light">Width 25%</div>
      <div class="w-50 p-3 mb-1 bg-secondary text-light">Width 50%</div>
      <div class="w-75 p-3 mb-1 bg-secondary text-light">Width 75%</div>
      <div class="w-100 p-3 bg-secondary text-light">Width 100%</div>
    </div>

    <b-button class="m-1" variant="info" @click="showAlert"> 点击我 </b-button>

  </div>
</template>

<script>
import Logo from '../components/NuxtLogo.vue';
export default {
  components: {
    Logo,
  },

  data() {
    return {
      isLoginSuccss: null,
      envId: '',
      callFunctionResult: '',
      value: '',
    };
  },
  computed: {

  },

  created() {
  },

  methods: {
    showAlert() {
      this.$bvToast.toast('This is toast number', {
        title: '老婆,我爱你',
        autoHideDelay: 5000,
      });
    },
  },
};
</script>

<style>
.container {
  margin: 0 auto;
  min-height: 100vh;
}
.a {
}
</style>
